<template>
  <div class="app-car-container">
    <CustomContent>
      <template v-slot:body>
        <el-row>
          <el-col :sm="24" :md="24" :lg="24">
            <MmvTitle title="佣金提现"></MmvTitle>
          </el-col>
          <el-col :sm="24" :md="24" :lg="24" class="table-padding">
            <el-descriptions title="">
              <el-descriptions-item :label-class-name="myDescriptionsLabel"  label="开启后，佣金可以提现">
                <el-switch
                  v-model="form.isCommissionWithdrawal"
                  @change="isCommissionWithdrawal($event)"
                  :active-value="1"
                  :inactive-value="0"
                ></el-switch>
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
          <el-col :sm="24" :md="24" :lg="24">
            <MmvTitle title="佣金提现审核"></MmvTitle
          ></el-col>
          <el-col :sm="24" :md="24" :lg="24" class="table-padding">
            <el-descriptions title="">
              <el-descriptions-item :label-class-name="myDescriptionsLabel"  label="开启后，佣金提现需要进行审核">
                <el-switch
                  v-model="form.isCommissionWithdrawalAudit"
                  :active-value="1"
                  :inactive-value="0"
                ></el-switch>
              </el-descriptions-item>
            </el-descriptions>

            <el-form
              label-width="120px"
              label-position="left"
              :rules="rules"
              ref="form"
              :model="form"
            >
              <el-form-item label="提现金额下限" prop="withdrawalAmountMinimum">
                <el-input
                  style="width: 200px"
                  v-model="form.withdrawalAmountMinimum"
                  placeholder="提现金额下限"
                ></el-input>
              </el-form-item>
              <el-form-item label="提现金额上限" prop="withdrawalAmountLimit">
                <el-input
                  style="width: 200px"
                  v-model="form.withdrawalAmountLimit"
                  placeholder="提现金额上限"
                ></el-input>
              </el-form-item>
              <el-form-item label="提现手续费比例" prop="commissionRatio">
                <el-input
                  style="width: 200px"
                  v-model="form.commissionRatio"
                  placeholder="提现手续费比例"
                >
                  <div slot="suffix" class="dw">%</div>
                </el-input>
              </el-form-item>
              <el-form-item label="月提现次数" prop="withdrawalTimes">
                <el-input
                  style="width: 200px"
                  v-model="form.withdrawalTimes"
                  placeholder="月提现次数"
                >
                  <div slot="suffix" class="dw">次</div>
                </el-input>
              </el-form-item>
              <el-form-item label="提现支持账户">
                <el-checkbox-group
                  v-model="checkboxGroup1"
                  size="small"
                  @change="form.supportAccount = String(checkboxGroup1)"
                >
<!--                  <el-checkbox label="1" border>微信支付</el-checkbox>
                  <el-checkbox label="2" border>支付宝</el-checkbox>-->
                  <el-checkbox label="3" border>线下转账</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </template>
      <template v-slot:footer>
        <div class="footer">
          <el-button type="" @click="getInfo" :loading="loading2"
            >刷新</el-button
          >
          <el-button
            type="primary"
            @click="submit"
            :loading="loading"
            v-hasPermi="[
              'commmisson:withdrawalset:add',
              'commmisson:withdrawalset:update',
            ]"
          >
            保存</el-button
          >
        </div>
      </template>
    </CustomContent>
  </div>
</template>

<script>
import * as SettingApi from '@/api/marketing/setting.js'
import CustomContent from '@/components/custom/content.vue'
import MmvTitle from '@/components/MmvUI/MmvTitle.vue'
export default {
  data() {
    return {
      form: {
        withdrawalSetId: '', // 	主键ID,
        tenantId: '', // 	租户ID,
        isCommissionWithdrawal: 0, // 是否开启佣金提现:1是,0否,
        isCommissionWithdrawalAudit: 0, // 	是否开启佣金提现审核:1是,0否,
        withdrawalAmountLimit: 0, // 	提现金额上限,
        withdrawalAmountMinimum: 0, // 	提现金额下限,
        commissionRatio: 0, // 	手续费比例,
        withdrawalTimes: 0, // 	月提现次数,
        supportAccount: '', // 提现支持账户用逗号隔开:1微信支付，2支付宝，3线下转账 4.人工付款,
      },
      checkboxGroup1: [],
      loading: false,
      loading2: false,
      rules: {
        commissionRatio: [
          {
            required: true,
            trigger: 'blur',
            pattern: /^([1-9]\d*)$/,
            message: '只能输入正整数',
          },
        ],
        withdrawalTimes: [
          {
            required: true,
            trigger: 'blur',
            pattern: /^([1-9]|[1-9][0-9]|[1-9][0-9][0-9])$/,
            message: '只能输入1-999正整数',
          },
        ],
        withdrawalAmountMinimum: [
          {
            required: true,
            trigger: 'blur',
            pattern: /^[0-9]+(.[0-9]{1,2})?$/,
            message: '价值为正数，且保留两位小数',
          },
        ],
        withdrawalAmountLimit: [
          {
            required: true,
            trigger: 'blur',
            pattern: /^[0-9]+(.[0-9]{1,2})?$/,
            message: '价值为正数，且保留两位小数',
          },
        ],
      },
      myDescriptionsLabel :{
      'min-width': '200px'
    }
    }
  },
  components: {
    MmvTitle,
    CustomContent,
  },
  created() {
    this.getInfo()
  },
  methods: {
    getInfo() {
      this.loading2 = true
      SettingApi.info().then((res) => {
        this.form = res.data || this.form
        this.checkboxGroup1 = res.data?.supportAccount?.split(',') || []
        this.loading2 = false
      })
    },
    submit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true
          if (this.form.withdrawalSetId) {
            SettingApi.put(this.form)
              .then((res) => {
                this.$message.success(res.msg)
                this.loading = false
              })
              .catch((err) => {
                this.$message.error(err.message)
              })
          } else {
            SettingApi.add(this.form)
              .then((res) => {
                this.$message.success(res.msg)
                this.loading = false
              })
              .catch((err) => {
                this.$message.error(err.message)
              })
          }
        }
      })
    },
    isCommissionWithdrawal(val) {
      if (val == true) {
      } else {
        this.form.isCommissionWithdrawalAudit = 0
      }
    },
  },
}
</script>
<style scoped>
.dw {
  padding-right: 8px;
}
.my-descriptions-label {
min-width: 200px;
}
</style>
